<template>
    <div class="detail-wrap">
        <div>
            <div class="detail-title" v-if="processIndex===1">{{detailList[curTabIndex].totalTitle}}</div>
            <div class="detail-content" v-if="processIndex===1">
              {{detailList[curTabIndex].introOne}}
            </div>
            <div class="detail-content" v-if="processIndex===1">
              {{detailList[curTabIndex].introTwo}}
            </div>
            <div v-for="(bigItem, bigIndex) in detailList[curTabIndex].total" :key="bigIndex">
              <div v-if="processIndex===1 && processIndex===bigIndex + 1">
                <div class="big-title">{{bigItem.title}}</div>
                <div class="detail-content" v-for="item in bigItem.totalContent" :key="item">
                  {{item}}
                </div>
                <img :src="bigItem.img" class="pic"/>
                <div class="detail-content" v-if="processIndex===1">
                  {{bigItem.summary}}
                </div>
              </div>
              <div v-else-if="(processIndex!==1&&processIndex!==6) && processIndex===bigIndex + 1">
                <div class="big-title">{{bigItem.title}}</div>
                <div  v-for="item in bigItem.totalContent" :key="item.littleTitle">
                  <div class="little-title">{{item.littleTitle}}</div>
                  <div class="detail-content" v-for="nr in item.content" :key="nr">
                    {{nr}}
                  </div>
                </div>
              </div>
              <div v-else-if="processIndex===6 && processIndex===bigIndex + 1">
                <div class="big-title">{{bigItem.title}}</div>
                <div class="detail-content" v-for="item in bigItem.totalContent" :key="item">
                  {{item}}
                </div>
              </div>
            </div>
        </div>
    </div>
</template>
<script>
import detail from '@/api/industryData'
export default {
  props: {
    processIndex: { // 项目列表index
      type: Number,
      required: true
    },
    curTabIndex: { // 项目第几批
      type: Number,
      required: true
    }
  },
  data () {
    return {
      detailList: detail.industryDetailData
    }
  },
  mounted () {
  }
}
</script>
<style lang="stylus" scoped>
.detail-wrap {
    margin:60px auto;
    width:794px
    .detail-title {
        font-family: MicrosoftYaHei-Bold;
        font-size: 24px;
        color: #1E1E1E;
    }
    .little-title {
        font-family: MicrosoftYaHei-Bold;
        font-size: 16px;
        color: #1E1E1E;
        margin-top:50px;
        font-weight: bold;
    }
    .big-title {
        font-family: MicrosoftYaHei-Bold;
        font-size: 16px;
        color: #1E1E1E;
        margin-top:30px;
        font-weight: bold
    }
    .detail-content
    {
        font-family: MicrosoftYaHei;
        font-size: 14px;
        color: #525252;
        line-height: 34px;
        margin-top:30px
    }
    .pic
    {
        width:814px;
    }
}
</style>